<template>
	<view class="time-line">
		<view class="time-line-item" :class="{ 'time-line-active-item': index <= processIndex }" v-for="(item, index) in list" :key="index">
			<view class="time-line-round"></view>
			<view class="time-line-text">
				<text>{{ item.substring(0, 4) }}</text>
				<text>{{ item.substring(4) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		processIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			list: ['咨询客服猫咪状态', '填写购买申请表', '支付定金', '免费体检【门店领取】', '支付尾款', '十天担保服务']
		};
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.time-line {
	display: flex;
	padding: 44rpx 66rpx 0 70rpx;
	font-size: 20rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 90rpx;
	background: #FFFFFF;
	z-index: 9999;
	.time-line-item {
		width: 20%;
		position: relative;
		border-top: 2rpx solid #d8d8d8;
		color: #666666;
		line-height: 12px;
		
		&:nth-of-type(1) {
			width: 0;
		}
		.time-line-round {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			background: #d8d8d8;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			z-index: 999;
		}
		.time-line-text {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 30rpx;
			right: -75rpx;
			z-index: 999;
		}
	}
	.time-line-active-item {
		border-top: 2rpx solid #fa9090;
		color: #fa9090;
		font-weight: 600;
		.time-line-round {
			background: #fa9090;
		}
	}
}
</style>
